<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="500px"
      append-to-body
      :before-close="close"
    >
      <div class="voucher">
        <div class="voucher__item" v-for="url in payVoucherList">
          <el-image
            fit="cover"
            style="width: 100%; height: auto;"
            :src="url"
            :preview-src-list="payVoucherList" :key="url"
            lazy
          >
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </div>
        <el-empty description="无" v-if="!payVoucherList.length"></el-empty>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    title: {
      default: '支付凭证详情'
    },
    data: {
      default: () => ({})
    }
  },
  dicts: [],
  data() {
    return {
      payVoucherList: []
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val) // 此处监测showMask目的为关闭弹窗时，重新更换value值，注意emit的事件一定要为input。
      }
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.init()
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    init() {
      this.reset()
    },
    //重置表单
    reset() {
      this.payVoucherList = this.data.payVoucherList || []
    },
    close() {
      this.reset()
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  max-height: 80vh !important;
  overflow-y: auto;
}

.voucher {
  display: grid;
  grid-template-columns:repeat(1, 1fr);
  grid-gap: 5px;
}
</style>
